<template>
    <el-scrollbar class="w-full">
        <div class="preview-operation">
            <!--    原始关键词    -->
            <div class="mt-[0px]">
                <div class="flex items-center">
                    <span class="text-lg font-bold">原始关键词</span>
                    <img
                        class="w-[16px] h-[16px] ml-[10px] cursor-pointer"
                        :src="IconCopy"
                        alt="复制"
                        @click="onCopy(formData.prompt)"
                    />
                </div>
                <div
                    class="mt-[10px] rounded-[4px] min-h-[60px] max-h-[120px] overflow-auto"
                    style="border: 1px solid #dcdfe6"
                >
                    <div class="px-[10px] py-[8px]">
                        {{ formData.prompt }}
                    </div>
                </div>
            </div>
            <!--    英文关键词    -->
            <div class="mt-[12px]" v-if="formData.prompt_en">
                <div class="flex items-center">
                    <span class="text-lg font-bold">英文关键词</span>
                    <img
                        class="w-[16px] h-[16px] ml-[10px] cursor-pointer"
                        :src="IconCopy"
                        alt="复制"
                        @click="onCopy(formData.prompt_en)"
                    />
                </div>
                <div
                    class="mt-[10px] rounded-[4px] min-h-[60px] max-h-[120px] overflow-auto"
                    style="border: 1px solid #dcdfe6"
                >
                    <div class="px-[10px] py-[8px]">
                        {{ formData.prompt_en }}
                    </div>
                </div>
            </div>

            <!--    放大图片    -->
            <div
                class="mt-[20px]"
                v-if="formData?.status != 2 && formData.able_edit"
            >
                <div class="flex items-center">
                    <span class="text-lg font-bold">放大图片</span>
                </div>
                <span class="mt-[10px] text-xs text-[#999999]">
                    对左侧的其中一张图片进行放大
                </span>
                <div class="mt-[10px]">
                    <el-button
                        class="mb-[10px] mr-[10px] !ml-0"
                        @click="onEnlargement(formData, 1)"
                    >
                        左上
                    </el-button>
                    <el-button
                        class="mb-[10px] mr-[10px] !ml-0"
                        @click="onEnlargement(formData, 2)"
                    >
                        右上
                    </el-button>
                    <el-button
                        class="mb-[10px] mr-[10px] !ml-0"
                        @click="onEnlargement(formData, 3)"
                    >
                        左下
                    </el-button>
                    <el-button
                        class="mb-[10px] mr-[10px] !ml-0"
                        @click="onEnlargement(formData, 4)"
                    >
                        右下
                    </el-button>
                </div>
            </div>

            <!--    变体    -->
            <div
                class="mt-[20px]"
                v-if="formData?.status != 2 && formData.able_edit"
            >
                <div class="flex items-center">
                    <span class="text-lg font-bold">变体</span>
                </div>
                <span class="mt-[10px] text-xs text-[#999999]">
                    对左侧的其中一张图片进行多样化修改
                </span>
                <div class="mt-[10px]">
                    <el-button
                        class="mb-[10px] mr-[10px] !ml-0"
                        @click="onConversion(formData, 1)"
                    >
                        左上
                    </el-button>
                    <el-button
                        class="mb-[10px] mr-[10px] !ml-0"
                        @click="onConversion(formData, 2)"
                    >
                        右上
                    </el-button>
                    <el-button
                        class="mb-[10px] mr-[10px] !ml-0"
                        @click="onConversion(formData, 3)"
                    >
                        左下
                    </el-button>
                    <el-button
                        class="mb-[10px] mr-[10px] !ml-0"
                        @click="onConversion(formData, 4)"
                    >
                        右下
                    </el-button>
                </div>
            </div>

            <!--    更多操作    -->
            <div class="mt-[20px]">
                <div class="flex items-center">
                    <span class="text-lg font-bold">更多操作</span>
                </div>
                <div class="mt-[10px]">
                    <!--  下载  -->
                    <div
                        class="more_btn"
                        @click="onFileDownload(formData)"
                    >
                        <img
                            class="w-[16px] h-[16px]"
                            :src="IconDownload"
                        />
                        <span class="ml-[10px] text-base">下载</span>
                    </div>
                    <!--  一键切图  -->
                    <div
                        v-if="!formData?.actions?.includes( 'low_variation1' )"
                        class="more_btn"
                        @click="onSplitPic(formData)"
                    >
                        <img
                            class="w-[16px] h-[16px]"
                            :src="IconCutout"
                        />
                        <span class="ml-[10px] text-base">一键切图</span>
                    </div>
                    <!--  重新生成  -->
                    <div
                        v-if="!formData?.actions?.includes( 'low_variation1' ) && formData.able_edit"
                        class="more_btn text-primary"
                        @click="onReDrawing(formData)"
                    >
                        <img
                            class="w-[16px] h-[16px]"
                            :src="IconReload"
                        />
                        <span class="ml-[10px] text-base">重新生成</span>
                    </div>
                    <!--  分享至广场  -->
                    <div
                        v-if="appStore.getDrawSquareConfig.is_allow_share"
                        class="more_btn text-primary"
                        @click="onShareSquare(formData)"
                    >
                        <img
                            class="w-[16px] h-[16px]"
                            :src="IconShare"
                        />
                        <span class="ml-[10px] text-base">分享至广场</span>
                    </div>
                    <!--  删除  -->
                    <div
                        class="more_btn text-primary"
                        @click="onDelete(formData)"
                    >
                        <img
                            class="w-[16px] h-[16px]"
                            :src="IconDelete"
                        />
                        <span class="ml-[10px] text-base">删除</span>
                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>

    <ShareSquare v-if="showShare" ref="shareRef" @close="showShare = false"></ShareSquare>
</template>

<script setup lang="ts">
import IconCopy from 'assets/images/drawing/icon_copy.png'
import IconDownload from 'assets/images/drawing/icon_download.png'
import IconCollect from 'assets/images/drawing/icon_collect.png'
import IconCutout from 'assets/images/drawing/icon_cutout.png'
import IconReload from 'assets/images/drawing/icon_reload.png'
import IconShare from 'assets/images/drawing/icon_share.png'
import IconDelete from 'assets/images/drawing/icon_delete.png'
import feedback from '~/utils/feedback'
import { useAppStore } from '~/stores/app'
import { downloadImgFile } from '~/utils/download'
import ShareSquare from './component/share-square.vue'

const appStore = useAppStore()
const emit = defineEmits<{
    (event: 'drawing', value: any): void
    (event: 'delete', value: number[]): void
    (event: 'split', value: string): void
    (event: 'update:modelValue', value: any): void
}>()

const props = withDefaults(
    defineProps<{
        formData?: any // 数据
    }>(),
    {
        formData: {
            prompt: '',
            prompt_en: '',
            action: '',
            image_base: '',
            image_id: '',
            scale: ''
        }
    }
)

const showShare = ref<boolean>(false)
const shareRef = shallowRef<any>(null)

const { copy } = useCopy()
// 复制文字
const onCopy = async (content: string) => {
    await copy(content)
}

// 放大图片
const onEnlargement = (drawing: any, index: number) => {
    const params = drawing
    params.action = 'upsample' + index
    emit('drawing', { drawing: params })
}

// 变体图片
const onConversion = (drawing: any, index: number) => {
    const params = drawing
    params.action = 'variation' + index
    emit('drawing', { drawing: params })
}

// 文件下载
const onFileDownload = async (drawing: any) => {
    if (Array.isArray(drawing.image_url)) {
        feedback.msgError('切片后请右击保存图片～')
        return
    }
    downloadImgFile(drawing.image_url)
}

// 一键切图
const onSplitPic = async (drawing: any) => {
    emit('split', drawing.image_url)
}

// 重新生成
const onReDrawing = async (drawing: any) => {
    const params: any = {}
    params.action = 'generate'
    params.prompt = drawing.prompt
    params.image_id = ''
    params.scale = drawing.scale
    params.image_base = drawing.image_base
    emit('drawing', { drawing: params })
}

const onShareSquare = async (drawing: any) => {
    showShare.value = true
    await nextTick()
    shareRef.value.open(drawing)
}

const onDelete = (drawing: any) => {
    emit('delete', [drawing.id])
}
</script>

<style lang="scss" scoped>
.preview-operation {
    padding: 20px 15px;
    border-radius: 10px;
}
.more_btn:last-child {
    margin-right: 0;
}
.more_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 12px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    user-select: none;
}
</style>
